<template>
	<view>
		<view class="tab-box">
			<uv-tabs :list="tabList" @click="clickTab"></uv-tabs>
		</view>
		<view class="select-ground" @click="openPicker">
			<view class="item-left">选择场地</view>
			<view class="item-right">
				<view>{{selectGround}}</view>
				<image src="../../static/images/user/编组 4备份 10@2x.png" class="image"></image>
			</view>
		</view>
		<view class="select-ground">
			<view class="item-left">使用{{dataList.length}}次</view>
			<view class="item-right">总消费{{totalIncome}}</view>
		</view>
		<view class="month-box" v-if="dataList.length>0">
			<view class="list_item" v-for="item in dataList" :key="item.id">
				<view class="item-top">
					<view class="ground-name">{{item.ground.name}}</view>
					<view class="status">已完成</view>
				</view>
				<view class="item-center">{{item.paytime_text}}</view>
				<view class="item-bottom">
					<view class="nickname">{{item.user.nickname}}</view>
					<view class="order-info">使用{{ item.yd_time }}分钟,消费{{ item.amount }}元
						<text v-if="item.paytype=='free_coupon'" style="color: red;">免单券支付</text>
						<text v-if="item.paytype=='wechat'" style="color: blue;">微信支付</text>
						<text v-if="item.paytype=='money'" style="color: blue;">余额支付</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-else>
			<image src="../../static/images/nodata.png" class="image"></image>
			<view>暂无记录～</view>
		</view>
		<uv-picker ref="picker" :columns="columns" keyName="name" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				tabList: [{
						name: '今日',
						value: 'today'
					}, {
						name: '昨日',
						value: 'yesterday'
					},
					{
						name: '本周',
						value: 'week'
					}, {
						name: '本月',
						value: 'month'
					}
				],
				selectGround: '',
				dataList: [],
				totalIncome: '0.00',
				params: {
					ground_id: '',
					period: 'today'
				},
				columns: []
			}
		},
		onLoad() {
			this.getAreaList()
			this.getIncomeDate()
		},
		methods: {
			clickTab(e) {
				this.params.period = e.value
				this.getIncomeDate()
			},
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.params.ground_id = e.value[0].id
				this.selectGround = e.value[0].name
				this.getIncomeDate()
			},
			getAreaList() {
				api.getGroundAll().then(res => {
					let columns = [{
						name: "全部",
						id: ""
					}]
					this.columns = [columns.concat(res.data)];
				});
			},
			getIncomeDate() {
				api.getIncomeDate(this.params).then(res => {
					this.dataList = res.data.order_list
					this.totalIncome = res.data.total_income
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.empty-box {
		text-align: center;
		margin-top: 80px;
		color: #adadad;

		.image {
			width: 200px;
			height: 200px;
			margin-bottom: 20px;
		}
	}

	.select-ground {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;

		.item-right {
			display: flex;
			align-items: center;
		}

		.image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.month-box {
		margin: 20rpx 0 0;
		padding: 20rpx;
		background-color: #ffffff;

		.list_item {
			margin: 20rpx 0 0;
			padding: 20rpx 0;

			.item-top {
				display: flex;
				justify-content: space-between;

				.ground-name {}

				.status {
					font-size: 28rpx;
					color: #22d0bf;
				}
			}

			.item-center {
				margin: 6rpx 0;
				color: #adadad;
			}

			.item-bottom {
				display: flex;
				align-items: center;

				.nickname {
					color: blue;
				}

				.order-info {
					color: #ff7270;
				}
			}
		}
	}
</style>